<template>
  <CardMode
    v-if="hotel.artistsList && hotel.artistsList.length"
    title="艺术家推荐"
    :more="`全部${hotel.artistsList.length}位`"
  >
    <div class="content">
      <template v-for="(item, index) in hotel.artistsList">
        <div class="item" :key="index" v-if="index < 3">
          <image class="img" :src="item.avatar" />
          <div class="name">{{ item.artName }}</div>
          <div class="type">{{ item.major }}</div>
          <div class="button active" @click="to('/pages-sub/artist/index', { id: item.id })">
            查看
          </div>
        </div>
      </template>
    </div>
  </CardMode>
</template>
<script setup lang="ts">
import { to } from '@/utils/page'
defineOptions({ name: 'Artist' })

defineProps(['hotel'])
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: space-evenly;
  padding: 0;

  .item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 212rpx;
    height: 364rpx;
    overflow: hidden;
    background-color: #fff;
    border-radius: 30rpx;
    &:last-child {
      margin-right: 0;
    }
    .img {
      width: 134rpx;
      height: 134rpx;
      background-color: var(--bgc1);
      border-radius: 50%;
    }
    .name {
      margin-top: 20rpx;
      font-size: 27rpx;
      line-height: 32rpx;
      color: var(--color1);
      word-break: keep-all;
    }
    .type {
      margin-top: 4rpx;
      font-size: 23rpx;
      color: var(--color4);
      word-break: keep-all;
    }
    .button {
      box-sizing: border-box;
      width: 146rpx;
      height: 58rpx;
      margin-top: 20rpx;
      font-size: 23rpx;
      line-height: 56rpx;
      color: var(--color1);
      text-align: center;
      border: 1px solid #c0c4cc;
      border-radius: 28rpx;
    }
  }
}
</style>
